<template>
<div class="product">
  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->
  
  <div class="content">
    <div class="flex product-module">
      <div
        v-for="(nav, ix) in showMenu"
        :key="ix"
        @click="handleClick(nav)"
        class="product-module-item hand"
        :style="activeName == (nav.menu_id - 2000) ? styleObj: ''"
      >{{nav.name}}</div>
    </div>
    <div class="min-h1200">
      <div class="module-show margin-xauto" v-if="activeName == 1">
        <!-- 分类标签 -->
        <div v-if="tags.length>0" class="product-tag flex">
          <div
            class="product-item hand"
            :style="tag.tagid == tagActive ? styleObj: ''"
            v-for="(tag, tagix) in tags"
            :key="tagix"
            @click="changeTag(tag)"
          >{{tag.tagname}}</div>
        </div>
        
        <PanoList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 2">
        <!-- 分类标签 -->
        <div v-if="tags.length>0" class="product-tag flex">
          <div
            class="product-item hand"
            :style="tag.tagid == tagActive ? styleObj: ''"
            v-for="(tag, tagix) in tags"
            :key="tagix"
            @click="changeTag(tag)"
          >{{tag.tagname}}</div>
        </div>
        <!-- 列表 -->
        <VideoList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 3">
        
        <!-- 列表 -->
        <LiveList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 4">
        
        <!-- 列表 -->
        <EstateList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 5">
        
        <!-- 列表 -->
        <ThreeMList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 6">
        
        <!-- 列表 -->
        <Three360List :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 7">
        
        <!-- 列表 -->
        <ExhibitionList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 8">
        
        <!-- 列表 -->
        <TourList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>
      <div class="module-show margin-xauto" v-else-if="activeName == 9">
        
        <!-- 列表 -->
        <WalkList :list="list" v-if="list.length>0" />
        <div class="null tac" v-else>暂无数据</div>
      </div>

    </div>
    
    <div class="module-show margin-xauto tac product-page">
      <el-pagination
        :total="count"
        v-if='count'
        @current-change="handlePageChange"
        :current-page.sync='opts.pageIndex'
        :page-size='opts.pageSize'
        size='small'
        background
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
    
  </div>
  <Aside />
  <Footer />
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    PanoList: _ => import('@/components/common/PanoList'),
    VideoList: _ => import('@/components/common/VideoList'),
    LiveList: _ => import('@/components/common/LiveList'),
    EstateList: _ => import('@/components/common/EstateList'),
    ThreeMList: _ => import('@/components/common/ThreeMList'),
    Three360List: _ => import('@/components/common/Three360List'),
    ExhibitionList: _ => import('@/components/common/ExhibitionList'),
    TourList: _ => import('@/components/common/TourList'),
    WalkList: _ => import('@/components/common/WalkList'),
    Aside: _ => import('@/components/common/Aside'),
  },
  data() {
    return {
      activeName: '1',
      // navs: $globalconfig.HEADER_NAVS,
      styleObj: {
        borderColor: $globalconfig.THEME_COLOR,
        color: $globalconfig.THEME_COLOR,
      },
      opts: {
        pageIndex: 1,
        pageSize: 16,
        tagId: '',
        trade: '',
      },
      tags: [],
      tagActive: -1,
      list: [],
      count: 0,
    }
  },
  computed: {
    ...mapGetters(['siteMenu']),
    showMenu () {
      let arr = []
      if (this.siteMenu && this.siteMenu.length > 0) {
        let temparr = this.siteMenu.filter(item => item.menu_id === 2000)
        if (temparr && temparr.length > 0) {
          if (temparr[0].functions && temparr[0].functions.length > 0) {
            arr = temparr[0].functions
          }
        }
      }
      // console.log(arr)
      return arr
    },
  },
  methods: {
    // 切换产品模块
    handleClick(val) {
      this.activeName = val.menu_id - 2000
      // this.activeName = val.name
      this.tagActive = -1
      this.opts.pageIndex = 1
      this.opts.tagId = ''
      this.opts.trade = ''
      if ((val.menu_id - 2000) == 1 || (val.menu_id - 2000) == 2) {
        this.getTags()
      } else {
        this.tags = []
        this.tagActive = -1
      }
      this.getListPano()
    },
    // 切换分类标签
    changeTag(item) {
      // console.log(item)
      this.tagActive = item.tagid
      this.opts.pageIndex = 1
      if (this.activeName ==1) {
        this.opts.tagId = item.tagname
        if (item.tagname == '全部') {
          this.opts.tagId = ''
        }
      } else if (this.activeName ==2) {
        this.opts.trade = item.tagname
        if (item.tagname == '全部') {
          this.opts.trade = ''
        }
      }
      this.getListPano()
    },
    // 翻页
    handlePageChange() {
      this.getListPano()
    },
    // 获取全景列表
    getListPano() {
      let apiName = 'getPanoList'
      if (this.activeName == 1) {
        apiName = 'getPanoList'
      } else if (this.activeName == 2) {
        apiName = 'getVideoList'
      } else if (this.activeName == 3) {
        apiName = 'getLiveList'
      } else if (this.activeName == 4) {
        apiName = 'getEstateList'
      } else if (this.activeName == 5) {
        apiName = 'get3dList'
      } else if (this.activeName == 6) {
        apiName = 'get360List'
      } else if (this.activeName == 7) {
        apiName = 'getEventsList'
      } else if (this.activeName == 8) {
        apiName = 'getOverviewsList'
      } else if (this.activeName == 9) {
        apiName = 'getWalkList'
      }
      this.$api[apiName](this.opts).then(res => {
        // console.log(res)
        if (res.code == 100) {
          if (res.data && res.data.list && res.data.list.length > 0) {
            this.list = res.data.list
            this.count = res.data.count
          } else {
            this.list = []
            this.count = 0
          }
        }
      })
    },
    // 获取tag
    getTags() {
      let id = this.activeName - 1
      this.$api.getPanoHottags(id).then(res => {
        // console.log(res)
        if (res.code == 100) {
          res.data.unshift({tagname: '全部', tagid: -1})
          this.tags = res.data
        }
      })
    },
  },
  watch: {
    '$route.query.t': {
      handler(val) {
        // console.log(val)
        if (!val) {
          val = 1
        }
        let t = val
        this.activeName = String(t)
        this.getListPano()
        if (t == 1 || t == 2) {
          this.getTags()
        }
      },
    }
  },
  created() {
    // console.log(this.$route.query)
    if (this.$route.query && this.$route.query.t) {
      let t = this.$route.query.t
      this.activeName = String(t)
      this.getListPano()
      if (t == 1 || t == 2) {
        this.getTags()
      }
    } else {
      this.getListPano()
      this.getTags()
    }
  }
}
</script>

<style lang="stylus" scoped>
.product
  .content
    margin-top 70px
    .product-module
      justify-content center
      border-bottom 1px solid #eeeeee
      .product-module-item
        font-size 15px
        padding 0 20px
        height 40px
        line-height 40px
        color #666
        margin-right 15px
        border-bottom 2px solid rgba(0,0,0,0)
    .product-page
      padding-top 10px
      padding-bottom 50px
    .module-show
      width 1200px
      .product-tag
        margin-top 25px
        width 100%
        flex-wrap wrap
        .product-item
          width 16%
          height 50px
          text-align center
          line-height 50px
          border 1px solid #ddd
          color #999
          margin-bottom 15px
          margin-right 0.666666%
          &:hover
            background-color #f5f5f5
          .product-item:nth-child(6n)
            margin-right 0
</style>
<style lang="stylus">
.product
  .content
    .el-tabs__nav-scroll
      display flex
      justify-content center
    .el-tabs__item
      font-size 15px
</style>
